<template>

	<div class="page">
		<mt-navbar v-model="active">
		  <mt-tab-item id="join">参加的活动</mt-tab-item>
		  <mt-tab-item id="start">发起的活动</mt-tab-item>
		</mt-navbar>
		<div class="table-view" v-infinite-scroll="getData" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
		  <li class="cell" v-for="(s,index) in itemGroups[active]">
		  	<div class="content-ac">
		    			<div class="content-right">
		    				<img :src="s.image"/>
		    			</div>
		    			<div class="content-left">
		    				<p>名称：{{s.name}}</p>
		    				<p>货号：{{s.goods_no}}</p>
		    				<p>参与价格：￥{{s.price}}</p>
		    				<p>已付定金：￥{{s.orderedMoney}}</p>
		    				<p>服饰描述：{{s.content}}</p>
		    				<p v-if="active == 'join'">颜色：{{s.color_name}}</p>
		    				<p v-if="active == 'join'">尺码：{{s.size_name}}</p>
		    				<p v-if="active == 'join'">数量：{{s.purchaseNum}}件</p>
		    				<p v-if="active == 'start'">成功参与人数：{{s.joinTotal}}</p>
		    				<p v-if="active == 'start'">实际购买人数：{{s.pruchaseNum}}</p>
		    				<p v-if="active == 'start'">预计获得返现金额：{{s.recommendIntegral * s.joinTotal}}</p>
		    				<p>结束时间：2018-05-21</p>
		    				<mt-button :id="'btn'+index" type="default" class="showQR-btn"  @click="showQR(index)" v-if="active == 'join' && s.status == '0' && s.orderSattus == '1'">展示二维码</mt-button>
		    				<mt-button  type="primary" class="showQR-btn" v-if="active == 'join' && s.status == '1' && s.orderSattus == '1'">已成功购买</mt-button>
		    				<mt-button  type="danger" class="showQR-btn" v-if="active == 'join' && s.status == '0' && s.orderSattus == '2'">已退定金</mt-button>
		    				<p :id="'qr'+index" ref="qrcode"></p>
		    			</div>
		    		</div>
		  </li>
		</div>
		<div id="mask" @click="hidden()" v-show="showQr">
			<div class="content">
				<div id="qr"></div>
			</div>
		</div>
	</div>
</template>


<style>
	@import url("./activities.css");
	@import url("../../common/common.css");
</style>
<script>
	import $ from 'jquery'
	import QRCode from 'qrcodejs2'
	export default{
		name:'activities',
		data:function(){
			return {
				items:[],
				itemGroups:{start:[],join:[]},
				pageNos:{start:0,join:0},
				openId:null,
				active:'join',
				loading:false,
				showQr:false
			}
		},
		components: {
			QRCode
		},
		created(){
			document.title = '活动中心';
			this.openId = this.$route.params.openId;
//			this.getData();
		},
		methods:{
			qrcode(codeId,content){
				let qrcode = new QRCode(codeId, {  
			      width: 200,  // 设置宽度 
			      height: 200, // 设置高度
			      text: content
			 }) ;
			},
			showQR(index){
				this.showQr = true;	
				$('#qr').empty();
//				$('#btn'+index).css('display','none')
				var item = this.itemGroups[this.active][index]
				var qrJson = {pkid:item.pkId,goodsId:item.goodsId,openId:this.openId}
				this.$nextTick (function () {
					this.qrcode('qr',JSON.stringify(qrJson));
				})
			},
			hidden(){
				this.showQr = false;	
			},
			getData(){
				var _self = this;
				_self.$Spin.show();
				 this.loading = true;
				_self.pageNos[_self.active]++;
				$.ajax({
				  	type:"post",
				  	contentType:'application/json;charset=UTF-8',
				  	url:this.utils.rootUrl + "fashion/activity?pageSize=10&pageNo="+_self.pageNos[_self.active],
				  	data:JSON.stringify({
				  		type:_self.active,
				  		openId:_self.openId
				  	}),
				  	success:function(res){
				  		_self.$Spin.hide();
				  		if(res.dataList.length == 0){
				  			_self.loading = true;
				  			return;
				  		}
				  		_self.loading = false;
			  			for(var i = 0; i < res.dataList.length;i++){
			  				var item = res.dataList[i];
			  				if(item.pkId){
			  					_self.itemGroups[_self.active].push(item)
			  				}
			  			}
				  	},
				  	error:function(e){
				  		_self.$Spin.hide();
				  		_self.loading = false;
				  	}
				  });
			}
			
		},
		watch:{
			active(curVal,oldVal){
				if(curVal == this.active && this.itemGroups[this.active].length > 0){
					return;
				}
				this.loading = false;
				this.getData();
			}
		},
	    deactivated(){
	    		this.loading = true;
	    },
	}
</script>

